<template>
    <div id="login-page">
        <div class="login-main">
            <div class="login-title">
                阿米巴数字化经营管理系统
            </div>
            <div class="login-wrap">
                <el-form :span="10" ref="loginForm" :model="loginForm" :rules="rules" @keyup.enter.native="login">
                    <div>
                        <template v-if='state=="login"'>
                            <el-form-item prop="username">
                                <el-input placeholder="请输入用户名"
                                          v-model="loginForm.username"></el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input type="password" placeholder="请输入密码"
                                          v-model="loginForm.password"></el-input>
                            </el-form-item>
                            <el-form-item prop="env" v-if="t">
                                <el-select placeholder="选择环境" v-model="loginForm.env" @change="changeEnv">
                                    <el-option label="开发环境" value="dev"></el-option>
                                    <el-option label="测试环境" value="test"></el-option>
                                    <el-option label="生产环境" value="pro"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-checkbox>记住账号</el-checkbox>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click.native.prevent="login">登录</el-button>
                            </el-form-item>
                            <el-form-item>
                                没有账号？
                                <el-button type="text" @click="show('register')">点击注册</el-button>
                            </el-form-item>
                        </template>
                        <template v-if='state=="register"'>
                            <el-form-item prop="mobileNo">
                                <el-input placeholder="请输入手机号" v-model="login.mobileNo"></el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input placeholder="请输入验证码" v-model="login.authCode" class="input-with-select">
                                    <el-button slot="append" @click="getAuthCode" :disabled="timeout>0">
                                        {{ timeout == 0 ? '获取验证码' : `${timeout}后重试` }}
                                    </el-button>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input type="password" placeholder="请输入密码" v-model="login.password"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="register">注册</el-button>
                            </el-form-item>
                            <el-form-item>
                                已有账号？
                                <el-button type="text" @click="show('login')">点击登陆</el-button>
                            </el-form-item>
                        </template>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import {login} from '@/api/api'
import db from '@/utils/localstorage'

export default {
    data() {
        return {
            checked: true,
            state: 'login',
            timeout: 0,
            loginForm: {
                username: '',
                password: '',
                mobileNo: '',
                authCode: '',
                env: 'pro'
            },
            loginRules: {
                username: [
                    {required: true, message: '请输入账号', trigger: 'blur'},
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                ]
            },
            registerRules: {},
            t: 0
        };
    },
    computed: {
        rules() {
            if (this.state == 'login') {
                return this.loginRules;
            } else {
                return this.registerRules;
            }
        },
    },
    methods: {
        show(state) {
            this.state = state;
            this.$refs.loginForm.clearValidate();
        },
        changeEnv(value) {
            // 设置缓存
            db.set('env', value);
        },
        login() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    let param = {
                        'username': this.loginForm.username,
                        'password': this.loginForm.password
                    };
                    login(param).then(data => {
                        this.loading = true;
                        if (data.respCode == 1000) {
                            let user = {};
                            user.token = data.body.token;
                            user.username = this.loginForm.username;
                            db.saveObject('user', user);
                            // 取到原页面路径
                            let url = this.$route.query.redirect;
                            if (url) {
                                // 跳转回原页面
                                this.$router.push({
                                    path: decodeURIComponent(url)
                                });
                            } else {
                                this.$router.push({path: '/'});
                            }
                        } else {
                            this.loading = false;
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        register() {
            alert("暂时不支持注册");
        },
        getAuthCode() {
            console.log("展示不支持获取验证码");
            this.timeout = 60
            let timer = setInterval(() => {
                this.timeout--
                if (this.timeout == 0) {
                    clearInterval(timer)
                }
            }, 1000);
        }
    },
    created() {
        let env = db.get('env')
        if (env && env !== "undefined") {
            this.loginForm.env = env;
        } else {
            db.set('env', this.loginForm.env)
        }
        // 监听键盘的enter按钮
        let _this = this;
        document.onkeydown = function (e) {
            let key = window.event.keyCode;
            if (key == 13) {
                _this.login();
            }
        };
        if (this.$route.query.t) {
            this.t = this.$route.query.t;
            db.set('t', this.t);
        }
    }
}
</script>

<style lang="stylus">
@import "../assets/css/login.styl"
#login-page
    position absolute
    width 100%
    height 100%
    background-color #84afb3
    background-position center center

    .login-main
        position absolute
        top 15%
        left 50%
        transform translateX(-50%)
        width 340px
        overflow hidden

        .login-title
            font-size 24px
            font-weight bold
            color t-white
            padding 20px
            text-align center
            opacity 0.7

        .login-wrap
            border-radius 5px
            background t-white

            .el-form
                padding 60px 40px 20px 40px

            .el-form-item
                margin-bottom 10px

                .el-button--primary
                    width 100%

    .login-info
        color t-white
        opacity 0.7
        line-height 20px
        position absolute
        left 20px
        top 20px
</style>
